<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>小米note2</title>
    <link rel="stylesheet" href="css/onepage-scroll.css" />
    <style>
    *{
    	margin:0;
    	padding:0;
    }
    body {
        font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
    }
    
    .page1 {
        background-image: url('./page1-images/bg1.jpg');
        background-size: cover;
    }
    
    .page1-container {
        width: 1126px;
        margin: 18% auto;
    }
    
    .page1-container span:nth-of-type(1) {
        line-height: 70px;
        font-size: 44px;
        color: #fff;
        display: block;
        font-family: 'F946a9';
    }
    
    .page1-container span:nth-of-type(2) {
        margin-top: 15px;
        line-height: 30px;
        font-size: 26px;
        color: #fff;
        display: block;
        letter-spacing: 2px;
    }
    .page1-container p:nth-of-type(1) {
    	margin-top:60px;
    	font-size: 18px;
    	color:#93a1aa;
    }
    .page1-container p:nth-of-type(2) {
    	margin-top:10px;
    	font-size: 18px;
    	color:#fff;
    }

    .page2 {
        position: relative;
        min-width: 1440px;
        text-align: center;
        z-index: 5;
    }
    .page2-content{
    	margin:10% auto 0;
    	width:400px;
    	position: relative;
    	z-index: 7;
    }
    .page2-content p{
    	text-align: center;
    	font-size: 14px;
    	color: #fff;
    	line-height: 30px;
    }
    .page2-left,.page2-right {
        float: left;
        width: 50%;
        height: 100%;
        z-index: 6;
    }
    
    .page2-left {
        background-image: url('./page1-images/bg2-1.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        top:0;
        left:0;
    }
    
    .page2-left:hover {
        background-image: url('./page1-images/bg2-1-h.jpg');
    }
    
    .page2-right {
        background-image: url('./page1-images/bg2-2.jpg');
        background-size: cover;
        position: absolute;
        top:0;
        right:0;
    }
    
    .page2-right:hover {
        background-image: url('./page1-images/bg2-2-h.jpg');
    }
    .page2-play{
    	position: absolute;
    	bottom:10%;
    	left: 0;
    	width:100%;
    	text-align: center;
    	overflow: hidden;
    }
    .page2-play a {
    	width:41px;
    	height: 41px;
    	display: inline-block;
    	background-image: url('./page1-images/icons.png');
    	background-repeat: no-repeat;
    	background-position: -78px 0px;
    }
    .page2-play p{
    	margin-top:25px;
    	color: #fff;
    }
    .page3 {
        background-image: url('./page1-images/bg3.jpg');
        background-repeat: no-repeat;
        background-size: cover;
    }
    .page3-container{
    	margin:18.8% auto 0;
    	width:100%;
    	text-align: center;
    }
	.page3-container p:nth-of-type(1){
		color:#fff;
		font-size: 38px;
		font-family: 'F946a9';
		line-height: 50px;
		letter-spacing: 1px;
	}
	.page3-container p:nth-of-type(2){
		margin-top: 25px;
		font-size: 16px;
		color:#fff;
		line-height: 26px;
	}

    .page4 {
        background-image: url('./page1-images/bg4.jpg');
        background-size: cover;
        position: relative;
    }
    .page4-container{
		position: absolute;
		bottom: 14%;
		left:7%;
		color:#fff;
    }
	.page4-container p:nth-of-type(1){
		color:#fff;
		font-size: 38px;
		font-family: 'F946a9';
		line-height: 50px;
	}
	.page4-container p:nth-of-type(2){
		margin-top: 25px;
		font-size: 16px;
		color:#fff;
		line-height: 26px;
	}

    .page5 {
        background-image: url('./page1-images/bg5.jpg');
        background-size: cover;
    }
    
    .page5-list {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    .page5-list li {
        float: left;
        width: 33.33%;
        height: 50%;
        border-right: 1px solid #c7cdd3;
        border-bottom: 1px solid #c7cdd3;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    .page5-inner {
        margin-top: 10%;
        height: 90%;
        text-align: center;
    }
    
    .page5-list li:nth-of-type(1) .page5-inner .page5-logo {
    	display: inline-block;
    	width:198px;
    	height:168px;
        background-image: url('./page1-images/icons.png');
        background-size: 100%;
        background-repeat: no-repeat;
    	background-position: center -612px;
    }
     .page5-list li:nth-of-type(2) .page5-inner .page5-logo {
    	display: inline-block;
    	width:198px;
    	height:168px;
        background-image: url('./page1-images/icons.png');
        background-size: 100%;
        background-repeat: no-repeat;
    	background-position: center -780px;
    }
     .page5-list li:nth-of-type(3) .page5-inner .page5-logo {
    	display: inline-block;
    	width:198px;
    	height:168px;
        background-image: url('./page1-images/icons.png');
        background-size: 100%;
        background-repeat: no-repeat;
    	background-position: center -945px;
    }
     .page5-list li:nth-of-type(4) .page5-inner .page5-logo {
    	display: inline-block;
    	width:198px;
    	height:168px;
        background-image: url('./page1-images/icons.png');
        background-size: 100%;
        background-repeat: no-repeat;
    	background-position: center -1115px;
    }
     .page5-list li:nth-of-type(5) .page5-inner .page5-logo {
    	display: inline-block;
    	width:198px;
    	height:168px;
        background-image: url('./page1-images/icons.png');
        background-size: 100%;
        background-repeat: no-repeat;
    	background-position: center -1285px;
    }
     .page5-list li:nth-of-type(6) .page5-inner .page5-logo {
    	display: inline-block;
    	width:198px;
    	height:168px;
        background-image: url('./page1-images/icons.png');
        background-size: 100%;
        background-repeat: no-repeat;
    	background-position: center -1452px;
    }
	.page5-inner p:nth-of-type(1){
		margin-top: 25px;
		font-size: 30px;
		color:#fff;
		line-height: 28px;
	}
	.page5-inner p:nth-of-type(2){
		color:#fff;
		font-size: 14px;
		margin-top:19px;
		line-height: 25px;
	}

    .page6 {
        background-image: url('./page1-images/bg6.jpg');
        background-size: cover;
    }
    .page6-container{
    	position: absolute;
		bottom: 14%;
		left:7%;
		color:#fff;
    }
    .page6-container .page6-title{
		color:#fff;
		font-size: 38px;
		font-family: 'F946a9';
		line-height: 50px;
	}
	.page6-container .page6-content{
		margin-top: 25px;
		font-size: 16px;
		color:#fff;
		line-height: 26px;
	}
	.page6-list{
		margin-top: 20px;
		list-style-type: none;
	}
	.page6-list li{
		margin-left: 20px;
		padding-left: 20px;
		float: left;
		border-left: 1px solid #c7cdd3;
		text-align: center;
	}
	.page6-list li:first-child{
		margin:0;
		padding:0;
		border:0;
	}
	.page6-list li span{
		font-size: 22px;
		color:#fff;
		text-align: center;
	}
	.page6-list li p{
		font-size: 14px;
		color:#fff;
	}
    
    .page7 {
        background-image: url('./page1-images/bg7_1.jpg');
        background-size: cover;
    }
    .page7-container{
    	position: absolute;
		right: 18.5%;
		top: 15%;
		width: 500px;
		text-align: left;
    }
    .page7-container p:nth-of-type(1){
    	color:#fff;
		font-size: 38px;
		font-family: 'F946a9';
		line-height: 50px;
    }
    .page7-container p:nth-of-type(2){
    	margin-top: 25px;
		font-size: 16px;
		color:#fff;
		line-height: 26px;
    }
    .page7-container div{
    	background-image: url('./page1-images/text.png');
		background-repeat: no-repeat;
		margin-top: 25px;
		height: 30px;
    }
    
    .page8 {
        background-image: url('./page1-images/bg8.jpg');
        background-size: cover;
    }
	.page8-container{
		margin:17% auto 0;
		text-align: center;
	}
	.page8-title{
    	color:#fff;
		font-size: 38px;
		font-family: 'F946a9';
		line-height: 50px;
    }
    .page8-content{
    	margin-top: 25px;
		font-size: 16px;
		color:#fff;
		line-height: 26px;
    }
    .page8-container div{
    	width:230px;
    	height:60px;
    	padding: 10px 0;
    	box-sizing: border-box;
    	margin:30px auto 0;
    	border:2px solid #fff;
    }
    .page8-container div p{
    	display: inline-block;
    	text-align: center;
    	height:42px;
    	font-size: 14px;
    	color:#fff;
    	margin:-2px 2px;
    	box-sizing: border-box;
    }
    .page8-container div p:nth-of-type(1){
    	border-right:2px solid #b8bfc7;
    	padding-right: 15px;
    }

    @media screen and (max-height:890px){
	    .page5-list li:nth-of-type(1) .page5-inner .page5-logo {
	    	display: inline-block;
	    	width:111px;
	    	height:95px;
	        background-image: url('./page1-images/icons.png');
	        background-size: 193px;
	        background-repeat: no-repeat;
	    	background-position: center -41px;
	    }
	     .page5-list li:nth-of-type(2) .page5-inner .page5-logo {
	    	display: inline-block;
	    	width:111px;
	    	height:95px;
	        background-image: url('./page1-images/icons.png');
	        background-size: 193px;
	        background-repeat: no-repeat;
	    	background-position: -40px -133px;
	    }
	     .page5-list li:nth-of-type(3) .page5-inner .page5-logo {
	    	display: inline-block;
	    	width:111px;
	    	height:95px;
	        background-image: url('./page1-images/icons.png');
	        background-size: 193px;
	        background-repeat: no-repeat;
	    	background-position: -40px -225px;
	    }
	     .page5-list li:nth-of-type(4) .page5-inner .page5-logo {
	    	display: inline-block;
	    	width:111px;
	    	height:95px;
	        background-image: url('./page1-images/icons.png');
	        background-size: 193px;
	        background-repeat: no-repeat;
	    	background-position: -40px -317px;
	    }
	     .page5-list li:nth-of-type(5) .page5-inner .page5-logo {
	    	display: inline-block;
	    	width:111px;
	    	height:95px;
	        background-image: url('./page1-images/icons.png');
	        background-size: 193px;
	        background-repeat: no-repeat;
	    	background-position: -40px -409px;
	    }
	     .page5-list li:nth-of-type(6) .page5-inner .page5-logo {
	    	display: inline-block;
	    	width:111px;
	    	height:95px;
	        background-image: url('./page1-images/icons.png');
	        background-size: 193px;
	        background-repeat: no-repeat;
	    	background-position: -40px -501px;
	    }
    }
	@media screen and (max-width: 1440px) and (max-height:810px){
		.page1 {
        	background-image: url('./page1-images/bg1-s.jpg');
        	background-size: cover;
    	}
    	.page2-right {
        	background-image: url('./page1-images/bg2-2-s.jpg');
        	background-size: cover;
    	}
    	.page2-left {
        	background-image: url('./page1-images/bg2-1-s.jpg');
        	background-size: cover;
    	}
    	.page3 {
        	background-image: url('./page1-images/bg3-s.jpg');
        	background-size: cover;
    	}
    	.page4 {
        	background-image: url('./page1-images/bg4-s.jpg');
        	background-size: cover;
    	}
    	.page5 {
        	background-image: url('./page1-images/bg5-s.jpg');
        	background-size: cover;
    	}
    	.page6 {
        	background-image: url('./page1-images/bg6-s.jpg');
        	background-size: cover;
    	}
    	.page7 {
        	background-image: url('./page1-images/bg7-s.jpg');
        	background-size: cover;
    	}
		.page8 {
        	background-image: url('./page1-images/bg8.jpg');
        	background-size: cover;
    	}
	}

    </style>
    <script src="http://cdn.staticfile.org/jquery/1.9.0/jquery.min.js"></script>
    <script src="js/jquery.onepage-scroll.min.js"></script>
    <script>
    $(function() {
        $('.main').onepage_scroll({
            sectionContainer: '.page',
            // responsiveFallback:true
            loop: false
        });
    });
    </script>
</head>

<body>
    <div class="main">
        <div class="page page1">
            <div class="page1-container">
                <span>小米Note 2 双曲面商务旗舰</span>
                <span>一面科技，一面艺术</span>
                <p>5.7" 双曲面柔性屏，正反面 3D 曲面玻璃 / 2256万超高像素相机
                    <br>骁龙821 性能版，可选 6GB + 128GB</p>
                <p>64GB 2799元 | 128GB 3299元</p>
            </div>
        </div>
        <div class="page page2">
            <div class="page2-left">
            	<div class="page2-play">
            		<a href="javascript"></a>
            		<p>播放《梁朝伟 冰山理论》</p>
            	</div>
            </div>
            <div class="page2-right">
            	<div class="page2-play">
            		<a href="javascript"></a>
            		<p>播放《小米Note 2 工艺》</p>
            	</div>
            </div>
            <div class="page2-content">
	            <p>
	            	就像经典的冰山理论，<br>
					第一眼看到的美，<br>
					只是全部创作的 1/8。<br>
					美的一面，是因为另一面了不起的探索：<br>
					小米Note 2 艺术品般的双曲面，背后是创新的柔性屏科技。<br>
					更强大的性能，则来自于更快的处理器、更快的存储、<br>
					更高像素的相机，以及对黑科技的不断探索。<br>
					创新的科技与艺术品般的工艺，<br>
					这就是我们为你打造的高端商务旗舰手机 。<br>
					小米Note 2 , 一面科技，一面艺术。<br>
				</p>
			</div>
        </div>
        <div class="page page3">
        	<div class="page3-container">
        		<p>
        			艺术品般的双曲面<br>
					背后是创新的柔性屏科技
        		</p>
        		<p>
        			双曲面的美，源自对屏幕科技的不断探索。小米Note 2 采用 OLED 柔性屏，<br>
					一块可以弯曲的屏幕*，贴合于艺术品般的曲面玻璃，更高屏占比让纤薄的机身，<br>
					拥有更大显示面积。画面仿佛在曲面流动，视觉也得到了更大的延展。
        		</p>
        	</div>
        </div>
        <div class="page page4">
        	<div class="page4-container">
        		<p>
        			商务旗舰<br>
					黑科技，  不仅仅是「 快 」
        		</p>
        		<p>
        			这依然是小米最快的安卓旗舰*！<br>
					骁龙821 性能版，高性能下再提速 10%。<br>
					可选 6GB +128GB 高速内存、闪存，进一步提升性能。<br>
					4070mAh 电池、高精度定位、HD 高清音质，<br>
					小米Note 2 不仅更快，更是方方面面全高端配置。
        		</p>
        	</div>
        </div>
        <div class="page page5">
            <ul class="page5-list">
                <li>
                    <div class="page5-inner">
                    	<span class="page5-logo"></span>
                    	<p>骁龙821 性能版</p>
                    	<p>
                    		最高主频达 2.35GHz ，应用启动速度相比骁龙<br>
							820 提升10%，游戏、聊天、音乐、购物、阅<br>
							读等多个应用同时使用，也能快的超乎想象。 
                    	</p>
                    </div>
                </li>
                <li>
                    <div class="page5-inner">
                    	<span class="page5-logo"></span>
                    	<p>128GB 超大容量</p>
                    	<p>
                    		大容量代表着你可以安装更多应用、存储更多视频。<br>
							同时支持新一代闪存标准 UFS 2.0* ，全双工运行，<br>
							安装、运行程序，看视频速度都更快了。 
                    	</p>
                    </div>
                </li>
                <li>
                    <div class="page5-inner">
                    	<span class="page5-logo"></span>
                    	<p>6GB 超大内存</p>
                    	<p>
                    		LPDDR4 双通道内存，意味着带宽更大、功耗更低。<br>
							玩大型游戏、开启多个应用、观看 4K 视频、拍摄慢动作<br>
							视频等运算速度都有了大幅提升。 
                    	</p>
                    </div>
                </li>
                <li>
                    <div class="page5-inner">
                    	<span class="page5-logo"></span>
                    	<p>4070mAh 大电量</p>
                    	<p>
                    		46小时持续通话、15小时视频播放*……大电量还能<br>
							让你尽情尽兴的游戏、看书和拍照。坐飞机出差，<br>
							看完一整季《权利的游戏》也不在话下。 
                    	</p>
                    </div>
                </li>
                <li>
                    <div class="page5-inner">
                    	<span class="page5-logo"></span>
                    	<p>HD 高清音质</p>
                    	<p>
                    		采用AQSTIC™ 高音质音频处理器, 输出 192kHz/24bit<br>
							高清音质, 高动态、低失真的特点,让你不论是<br>
							听摇滚、清唱、爵士乐，都如临现场。 <br>
                    	</p>
                    </div>
                </li>
                <li>
                    <div class="page5-inner">
                    	<span class="page5-logo"></span>
                    	<p>GPS 高精度定位</p>
                    	<p>
                    		一般手机在过隧道时常常失去卫星信号，<br>
							小米Note 2 内置 SAP 辅助定位，<br>
							为你在城市环境中持续提供导航，路线更精准。 <br>
                    	</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="page page6">
        	<div class="page6-container">
        		<p class="page6-title">       			
					2256 万超高像素相机<br>
					细节多得惊人 
        		</p>
        		<p class="page6-content">
        			主相机多达 1.7 倍的像素数*，带来震撼人心的照片细节。<br>
					高像素为照片提供了超高分辨率，放大看，依然清晰。<br>
					强大的相机性能，甚至能为 4K 影片进行硬件级防抖。<br> 
					前置相机首次支持自动对焦*，自拍美得有细节，合影人人都清晰。 
        		</p>
        		<ul class="page6-list">
        			<li>
        				<span>IMX318</span>
        				<p>超高像素</p>
        			</li>
        			<li>
        				<span>AF</span>
        				<p>前置自动对焦</p>
        			</li>
        			<li>
        				<span>4K</span>
        				<p>硬件级视频防抖</p>
        			</li>
        		</ul>
        	</div>
        </div>
        <div class="page page7">
        	<div class="page7-container">
        		<p>
        			4G+ 全球版<br>
					小米Note 2 走遍全球 
        		</p>
        		<p>
        			游览整个世界的美景，或准备去地球另一端开下一个<br>
					会议，带上小米Note 2 全球版 想去哪里都可以。对通讯<br>
					科技进一步的探索，使小米Note 2 支持全球主流频<br>
					段。6 模 37 频，意味着你在世界各地，都能使用<br>
					当地高速 4G 网络*。 
        		</p>
        		<div></div>
        	</div>
        </div>
        <div class="page page8">
            <div class="page8-container">
            	<p class="page8-title">亮黑与冰川银</p>
            	<p class="page8-content">
            		一面光明，一面夜晚的亮黑色，<br>
					黑得深邃，而光线照时却很明亮，优雅而神秘。<br>
					一面天空，一面大海的银色，<br>
					安静得像大海，光线流转时却像天空。<br>
					玻璃的材质，却拥有金属光泽，如梦如幻。<br>
            	</p>
            	<div>
            		<p>
            			64GB 2799元<br>
            			立即预约
            		</p>
            		<p>
            			128GB 3299元<br>
            			立即预约
            		</p>
            	</div>
            </div>
        </div>
    </div>
    <a href="http://www.dowebok.com/" style="display: none;">dowebok</a>
    <a href="http://www.dowebok.com/118.html" style="display: none;">onepage-scroll – jQuery单页/全屏滚动插件</a>
</body>

</html>
